<template>
  <view class="content">
    <u-navbar title="设置交易密码" :border-bottom="false"></u-navbar>
    <u-row class="content-r" gutter="16" justify="center">
      <u-col span="12" class="content-c">
        <view class="c-c-t">
          <text>新密码</text>
        </view>
        <view class="c-c-i">
          <u-input type="password" v-model="data.password" :password-icon="false" placeholder="请输入新密码"></u-input>
        </view>
      </u-col>
      <u-col span="12" class="content-c">
        <view class="c-c-t">
          <text>确认密码</text>
        </view>
        <view class="c-c-i">
          <u-input type="password" v-model="data.checkpassword" :password-icon="false" placeholder="请再次确认密码"></u-input>
        </view>
      </u-col>
      <u-col span="12" class="content-c">
        <view class="c-c-t">
          <text>验证码</text>
        </view>
        <view class="c-c-i">
          <view class="input-c">
            <u-input type="text" v-model="data.code" placeholder="请输入验证码"></u-input>
          </view>
          <view class="code-b">
            <u-button class="code-button" @click="getCode" plain :hair-line="false" v-if="!isGetCode">{{ codeText }}</u-button>
            <u-button class="code-button" @click="getCode" plain :hair-line="false" :disabled="true" v-else>{{ timer }} 后重新获取</u-button>
          </view>
        </view>
      </u-col>
      <!--      <u-col span="6">1</u-col>-->
      <!--      <u-col span="6">2</u-col>-->
      <u-col span="12" class="content-b">
        <u-button @click="do_update">确定</u-button>
      </u-col>
    </u-row>
  </view>
</template>
<script>
import myRequest from '@/api/index.js'

export default {
  name: "addpwd",
  data() {
    return {
      data     : {
        password     : '',
        checkpassword: '',
        code         : ''
      },
      codeText : '获取验证码',
      timer    : 60,
      mobile   : '',
      isGetCode: false
    }
  },
  onLoad() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      let res = await myRequest.getUserInfo()
      //console.log(res)
      if (res.status) {
        this.mobile = res.data.mobile
      }
    },
    async do_update() {
      let code           = this.data.code
      let pay_password   = this.data.password
      let check_passwrod = this.data.checkpassword
      if(code === ''){
        uni.showToast({
                        title:'请输入验证码',
                        icon:'none'
                      })
        return false
      }
      if(pay_password === ''){
        uni.showToast({
                        title:'请输入新密码',
                        icon:'none'
                      })
        return false
      }
      if(pay_password !== check_passwrod){
        uni.showToast({
                        title:'两次输入密码不一致',
                        icon:'none'
                      })
        return false
      }
      let res          = await myRequest.editUserInfo({
                                                        pay_password: pay_password,
                                                        code        : code
                                                      })
      if(res.status){
        uni.showToast({
          title:'提交成功',
          icon:'none'
                      })
      }
    },
    // 倒计时
    countdown() {
      let that    = this
      let myTimer = setInterval(() => {
        that.timer--
        if (that.timer == 0) {
          that.timer     = 60
          that.isGetCode = false
          clearInterval(myTimer)
        }
      }, 1000)
    },
    // 获取验证码
    async getCode() {
      let {
            mobile
          } = this
      // 验证手机号
      if (this.$u.test.mobile(mobile)) {
        uni.showLoading()
        // 发送验证码
        let res = await myRequest.sendCode({
                                             mobile: mobile
                                           })
        if (res.status) {
          uni.showToast({
                          title: '发送成功'
                        })
          this.isGetCode = true
          this.countdown()
          uni.hideLoading()
        } else {
          uni.showToast({
                          title: res.msg,
                          icon : 'none'
                        })
        }
      } else {
        uni.showToast({
                        title   : "您输入的手机号有误!",
                        icon    : 'none',
                        duration: 2000,
                      })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  font-family: Segoe UI;

  .content-r {
    padding: 0 28rpx;

    .content-c {
      margin-top: 32rpx;
      height: 176rpx;
      border-radius: 16rpx;
      background: #FFF;

      .c-c-t {
        padding: 0 10rpx;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 28rpx;
        color: #333;
      }

      .c-c-i {
        padding: 0 10rpx;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .input-c {
          width: 62%
        }

        .code-b {
          width: 38%;

          .code-button {
            font-size: 32rpx;
            font-weight: 400;
            color: #2D7AFE;
            border: none;
          }
        }
      }
    }

    .content-b {
      margin-top: 102rpx;
      height: 100rpx;

      button {
        height: 100rpx;
        border-radius: 16rpx;
        background: linear-gradient(180deg, #218BFF 0%, #3064FC 100%);
        border: none;
        color: #FFF;
        font-size: 34rpx;
        font-weight: 400;
      }
    }
  }
}
</style>